<template>
  <!-- table列表 -->
  <el-table
    :data="tableArr.datas"
    ref="multipleTable"
    :row-key="handleReserve"
    @row-click="onRowClick"
    @select="selectItem"
    @select-all="selectAll"
    header-cell-class-name="tableHeaderbg"
    class="Trpointer"
    size="small"
    stripe
    :height="tableListConHeight"
    cell-class-name='tdCell'
  >
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55"
      v-if="!(tableArr.notShowSelection)"
    ></el-table-column>
    <el-table-column
      v-for="(item, index) in tableArr.tableColumns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width ? item.width : ''"
    >
      <template slot-scope="scope">
        <span v-if="item.isBtn && item.isBtn.show == 'button'">
          <template v-if="item.isBtn.btnArr.length>0">
            <span
            v-for="(ite, ind) in item.isBtn.btnArr"
            :key="ind + 'btn' + index"
          >
            <el-button
              :type="ite.type ? ite.type : 'plain'"
              @click.stop="onTableBtnClick(ite.btnMethods, scope.row)"
              size="small"
              >{{ ite.btnName }}</el-button
            >
          </span>
          </template>
          <!-- 处理定时任务按钮 -->
          <template v-else-if="tableArr.type == 'timedtask' && item.prop == 'state'">
            <el-button
                v-if="scope.row.state == 0"
                size="mini"
                type="primary"
                @click="onTableBtnClick('start',scope.row)"
                >{{$t('start')}}</el-button
              >
              <el-button
                v-else
                size="mini"
                type="danger"
                @click="onTableBtnClick('stop',scope.row)"
                >{{$t('stoped')}}</el-button
              >
          </template>
        </span>
        <span v-else>
          <!-- 处理字段扩展 -->
          <span v-if="tableArr.type == 'fieldextend' && item.prop == 'type'">
            {{
              scope.row.type == "string"
                ? $t("string")
                : scope.row.type == "date"
                ? $t("date")
                : scope.row.type == "radio"
                ? $t("radio")
                : scope.row.type == "checkbox"
                ? $t("checkbox")
                : scope.row.type == "select"
                ? $t("select")
                : scope.row.type == "upload"
                ? $t("upload")
                : scope.row.type == "address"
                ? $t("address")
                : $t("clob")
            }}
          </span>
          <span
            v-else-if="tableArr.type == 'fieldextend' && item.prop == 'enabel'"
          >
            <span v-if="scope.row.enabel" class="greenColor">{{
              $t("show")
            }}</span>
            <span v-else class="orangeColor">{{ $t("not_show") }}</span>
          </span>
          <span
            v-else-if="
              tableArr.type == 'fieldextend' && item.prop == 'forTable'
            "
          >
            {{
              scope.row.forTable == "tableUser"
                ? $t("tableUser")
                : scope.row.forTable == "tableDept"
                ? $t("tableDept")
                : $t("tableDomain")
            }}
          </span>
            <!-- 处理定时任务 -->
          <span
            v-else-if="
              tableArr.type == 'timedtask' && item.prop == 'period'
            "
          >
              <span v-if="scope.row.period == 8192">{{$t('immediately')}}</span>
              <span v-else-if="scope.row.period == 34">{{ $t('minute') }}</span>
              <span v-else-if="scope.row.period == 546">{{ $t('hour') }}</span>
              <span v-else-if="scope.row.period == 2">{{ $t('day') }}</span>
              <span v-else-if="scope.row.period == 32">{{ $t('weeks') }}</span>
              <span v-else-if="scope.row.period == 512">{{ $t('months')}}</span>
              <span v-else>{{ $t('do_not_repeat') }}</span>
          </span>
          <span
            v-else-if="
              tableArr.type == 'timedtask' && item.prop == 'startupType'
            "
          >
              <span v-if="scope.row.startupType == 0">{{ $t('manual') }}</span>
              <span v-else-if="scope.row.startupType == 1">{{
                $t('auto')
              }}</span>
              <span v-else>{{ $t('banned') }}</span>
          </span>
          <span
            v-else-if="
              tableArr.type == 'timedtask' && item.prop == 'state'
            "
          >
          <span v-if="scope.row.state == 0" class="redColor">{{ $t('stoped') }}</span>
              <span v-else class="greenColor"> {{ $t('run') }}</span>
          </span>
          <span v-else :title="scope.row[item.prop]">
           {{ scope.row[item.prop] }}
          </span>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
    <script>
export default {
  name:'table_item',
  data() {
    return {
      multipleSelection: [],
    };
  },
  props: {
    tableArr: {
      default: {
        datas: [],
        tableColumns: [],
        notShowSelection: false,
        type: "",
        delId: "",
      }, //datas 数据，tableColumns 显示列名(prop,label,show button为按钮) ,notShowSelection 不显示多选框，type 标志为哪个模块，delId 把想要删除的id传过来
    },
    tableListConHeight: {
      type: String,
    },
  },
  created() {},
  methods: {
    selectItem(list, row) {
      this.handleSelectionChange(list);
    },
    selectAll(selection) {
      let list=[];
      // 全选
      const arr = [...selection, ...this.multipleSelection]
      list = Array.from(new Set(arr))
      this.handleSelectionChange(list);
     },
    handleReserve(row) {
      if (this.tableArr.type == "fieldextend") {
        return row.fid;
      } else return row.id;
    },
    onRowClick(row) {
      this.$emit("onRowClick", row);
    },
    handleSelectionChange(val) {
      var arr = [],
        id = this.tableArr.delId ? this.tableArr.delId : "id";
      val.forEach((val) => {
        if (this.tableArr.type == "fieldextend") {
          let data = val.name + "-" + val.fid + "-" + val.forTable;
          arr.push(data);
        } else arr.push(val[id]);
      });
      this.multipleSelection = arr;
      this.$emit("changeMulSelection", this.multipleSelection);
    },
    cancelInterval() {
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();
      });
    },
    clearSelection() {
      this.$refs.multipleTable.clearSelection(); //手动清除
      this.handleSelectionChange([]);
    },
    onTableBtnClick(name, row) {
      this.$emit("onTableBtnClick", name, row);
    },
  },
};
</script>